<template>
  <div class="container">
    <Card>
      <div class="search-list">
        <div class="search-item">
          <div class="item-text">商机Id</div>
          <div class="item-input">
            <Input
              clearable
              v-model="queryForm.businessId"
              placeholder="商机Id"
            />
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">联系电话</div>
          <div class="item-input">
            <Input
              clearable
              v-model="queryForm.businessTelephone"
              placeholder="输入商机电话号码"
            />
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">经纪人</div>
          <div class="item-input">
            <Input
              clearable
              v-model="queryForm.followName"
              placeholder="输入名称或电话号码"
            />
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">创建人</div>
          <div class="item-input">
            <Input
              clearable
              v-model="queryForm.creatorName"
              placeholder="输入名称或电话号码"
            />
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">时序状态</div>
          <div class="item-input">
            <Select @on-change="changeMenu1" clearable style="width: 186px">
              <Option value="0">待联系</Option>
              <Option value="1">意向阶段</Option>
              <Option value="2">商务洽谈</Option>
              <Option value="3">合约阶段</Option>
              <Option value="4">合约阶段</Option>
            </Select>
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">状态</div>
          <div class="item-input">
            <Select @on-change="changeMenu2" clearable style="width: 186px">
              <Option value="1">跟进中</Option>
              <Option value="2">成功</Option>
              <Option value="3">丢失</Option>
            </Select>
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">是否逾期</div>
          <div class="item-input">
            <Select @on-change="changeMenu3" clearable style="width: 186px">
              <Option value="0">否</Option>
              <Option value="1">是</Option>
            </Select>
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">分配状态</div>
          <div class="item-input">
            <Select @on-change="changeMenu4" clearable style="width: 186px">
              <Option value="0">未分配</Option>
              <Option value="1">已分配</Option>
            </Select>
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">审核状态</div>
          <div class="item-input">
            <Select @on-change="changeMenu5" clearable style="width: 186px">
              <Option value="1">待审核</Option>
            </Select>
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">创建时间</div>
          <div class="item-input">
            <DatePicker
              @on-change="changeTime"
              clearable
              :editable="false"
              type="datetimerange"
              placement="bottom-end"
              placeholder="选择时间"
              style="width: 300px"
            />
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">操作：</div>
          <div class="item-input">
            <Button type="primary" @click="searchList">查询商机</Button>
          </div>
        </div>
      </div>
    </Card>
    <Card>
      <!-- 列表 -->
      <div class="business-list">
        <div
          class="business-item"
          v-for="(item, index) in customerList"
          :key="item.id"
        >
          <div class="item">
            <div class="item-text">Id:</div>
            <div class="item-message">{{ item.id }}</div>
          </div>
          <div class="item">
            <div class="item-text">商机信息：</div>
            <div class="item-message">
              <div class="message">名称：{{ item.businessName }}</div>
              <div class="message">电话：{{ item.contactTelephone }}</div>
              <div class="message">品牌：{{ item.businessBrand }}</div>
              <div class="message">业态：{{ item.businessFormat }}</div>
              <div class="message">
                所推项目：{{ item.businessRealEstateName }}
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-text">经纪人：</div>
            <div class="item-message">
              <div class="message">电话：{{ item.salesManTelephone }}</div>
              <div class="message">昵称：{{ item.salesManNickName }}</div>
              <div class="message">ID：{{ item.salesManId }}</div>
            </div>
          </div>
          <div class="item">
            <div class="item-text">次数：</div>
            <div class="item-message">
              <div class="message">分配次数：{{ item.dispatchTimes }}</div>
              <div class="message">丢失次数：{{ item.loseTimes }}</div>
            </div>
          </div>
          <div class="item">
            <div class="item-text">数据创建人：</div>
            <div class="item-message">
              <div class="message">电话：{{ item.dataCreatorTelephone }}</div>
              <div class="message">昵称：{{ item.dataCreatorNickName }}</div>
              <div class="message">ID：{{ item.dataCreatorId }}</div>
            </div>
          </div>
          <div class="item">
            <div class="item-text">时序状态:</div>
            <div class="item-message">
              {{ item.currentStatus | currentStatusFilter }}
            </div>
          </div>
          <div class="item">
            <div class="item-text">状态:</div>
            <div class="item-message">
              {{ item.handlingStatus | handlingStatusFilter }}
            </div>
          </div>
          <div class="item">
            <div class="item-text">逾期时间:</div>
            <div
              class="item-message"
              v-if="item.overdueTime <= currentTime"
              style="color: #f56c6c"
            >
              {{ item.overdueTime | dateformat }}
            </div>
            <div
              class="item-message"
              v-if="item.overdueTime >= currentTime"
              style="color: #409eff"
            >
              {{ item.overdueTime | dateformat }}
            </div>
          </div>
          <div class="item">
            <div class="item-text">创建时间:</div>
            <div class="item-message">
              {{ item.createTime | dateformat }}
            </div>
          </div>
          <div class="item">
            <div class="item-text">操作:</div>
            <div class="item-message">
              <div class="btn-list">
                <div class="btn-item">
                  <Button
                    size="large"
                    type="primary"
                    @click="openRemoveArea(item.id)"
                    >转介</Button
                  >
                </div>
                <div class="btn-item">
                  <Button
                    v-if="item.salesManId"
                    size="large"
                    type="error"
                    @click="openDistribution(index, item.id)"
                    >重新分配</Button
                  >
                  <Button
                    v-else
                    size="large"
                    type="error"
                    @click="openDistribution(index, item.id)"
                    >分配带看人</Button
                  >
                </div>
                <div class="btn-item">
                  <Button
                    size="large"
                    type="primary"
                    @click="dailyTask(item.id)"
                    >跟进日志</Button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>
    <!-- 分页 -->
    <Page :total="total1" @on-change="changeNumber1" />
    <!-- 重新分配对话框 -->
    <Modal v-model="modal1" title="选择经纪人" @on-ok="openSet" @on-cancel="cancelData">
      <!-- 查询条件开始 -->
      <div class="search-list">
        <div class="search-item">
          <div class="item-text">姓名</div>
          <div class="item-input">
            <Input
              clearable
              v-model="wokerForm.userNickName"
              placeholder="输入经纪人姓名"
            />
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">片区</div>
          <div class="item-input">
            <Select
              @on-change="changeMenu6"
              ref="resetSelect"
              clearable
              style="width: 186px"
            >
              <Option
                v-for="item in areaList"
                :key="item.id"
                :value="item.id"
                >{{ item.groupName }}</Option
              >
            </Select>
          </div>
        </div>
        <div class="search-item">
          <div class="item-text">操作</div>
          <div class="item-input">
            <Button type="primary" @click="searchWorker">查询</Button>
            <Button type="primary" @click="openSet">确认经纪人并重置</Button>
          </div>
        </div>
      </div>
      <!-- 查询条件结束-->

      <!-- 跟进人数组开始-->
      <div class="trader-list">
        <div
          class="trader-item"
          :class="wokerIndex == index ? 'on' : ''"
          @click="sureItem(index, item.id)"
          v-for="(item, index) in wokerList"
          :key="item.id"
        >
          <div class="trader">
            <div class="trader-text">Id</div>
            <div class="trader-message">{{ item.id }}</div>
          </div>
          <div class="trader">
            <div class="trader-text">经纪人</div>
            <div class="trader-message">
              <div class="trader-box">昵称：{{ item.salesManNickName }}</div>
              <div class="trader-box">电话：{{ item.salesManTelephone }}</div>
            </div>
          </div>
          <div class="trader">
            <div class="trader-text">上级经纪人</div>
            <div class="trader-message">
              <div class="trader-box">
                昵称：{{ item.salesManParentNickName }}
              </div>
              <div class="trader-box">
                电话：{{ item.salesManParentTelephone }}
              </div>
            </div>
          </div>
          <div class="trader">
            <div class="trader-text">身份</div>
            <div class="trader-message">
              {{ item.salesManIdentity | salesManLevelFilter }}
            </div>
          </div>
          <div class="trader">
            <div class="trader-text">注册时间</div>
            <div class="trader-message">{{ item.createTime | dateformat }}</div>
          </div>
          <div class="trader">
            <div class="trader-text">公司员工</div>
            <div class="trader-message">
              {{ item.belongCompany | belongCompanyFilter }}
            </div>
          </div>
          <div class="trader">
            <div class="trader-text">交易数据</div>
            <div class="trader-message">
              <div class="trader-box">总佣金：{{ item.totalBalance }}</div>
              <div class="trader-box">当前佣金：{{ item.salesManBalance }}</div>
              <div class="trader-box">
                已提现金额：{{ item.cumulativeAmountWithdrawn }}
              </div>
              <div class="trader-box">
                成交量：{{ item.transactionQuantity }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 跟进人数组结束 -->

      <!-- 分页 -->
      <Page :total="total2" @on-change="changeNumber2" />
    </Modal>
    <!-- 提醒 是否需要重新分配 对话框 -->
    <Modal
      v-model="modal2"
      title="是否需要重新分配"
      @on-ok="sureNewSet"
      @on-cancel="cancelNewSet"
    >
      <div class="model-message">
        点击确认则重新分配商机，是否需要重新分配？
      </div>
    </Modal>
    <!-- 转介对话框 -->
    <Modal v-model="modal3" @on-ok="sureRemoveArea" @on-cancel="cancelArea" title="转介">
      <div class="areamessage">
        <div class="areamessage-hd">
          <div class="hd-title">原始信息</div>
          <div class="areamessage-list">
            <div class="areamessage-item">
              省份：{{ originalForm.originalProvince }}
            </div>
            <div class="areamessage-item">
              市区：{{ originalForm.originalCity }}
            </div>
            <div class="areamessage-item">
              区域：{{ originalForm.originalDistrict }}
            </div>
            <div class="areamessage-item">
              街道：{{ originalForm.originalStreet }}
            </div>
          </div>
        </div>
        <div class="areamessage-hd">
          <div class="hd-title">当前信息</div>
          <div class="areamessage-list">
            <div class="areamessage-item">
              省份：{{originalForm.currentProvince ? originalForm.currentProvince : '/'}}
            </div>
            <div class="areamessage-item">
              市区：{{originalForm.currentCity ? originalForm.currentCity : '/'}}
            </div>
            <div class="areamessage-item">
              区域：{{originalForm.currentDistrict ? originalForm.currentDistrict : '/'}}
            </div>
            <div class="areamessage-item">
              街道：{{originalForm.currentStreet ? originalForm.currentStreet : '/'}}
            </div>
          </div>
        </div>
        <Cascader
          v-model="addressLocation"
          change-on-select
          :value="value"
          @on-change="sureArea"
          :data="areamessageList"
          :load-data="areaData"
        ></Cascader>
      </div>
    </Modal>
    <!-- 转介确认提示框 -->
    <Modal v-model="modal4" @on-ok="sureRemoveAreaByModel" title="提示">
      此区域暂无管理员, 是否继续?
    </Modal>
    <!-- 跟进日志对话框 -->
    <Modal
        v-model="modal5"
        title="跟进日志"
        >
        <!-- 跟进日志数组 -->
        <div class="daily-list">
          <div class="daily-item" v-for="(item1,index) in dailyList" :key="item1.id">
            <!-- 日志标题 -->
            <div class="daily-title">
              <div class="daily-index">{{index+1}}</div>
              <div class="title-text">{{item1.innerComment}}</div>
            </div>
            <!-- 日志内容 -->
            <div class="daily-hd">
              <div class="hd-item">
                <div class="hd-text">新意向(地址)：</div>
                <div class="hd-text">{{ item1.newLocation ? item1.newLocation : '/' }}</div>
              </div>
              <div class="hd-item">
                <div class="hd-text">新意向(业态)：</div>
                <div class="hd-text">{{ item1.newFormat ? item1.newFormat : '/' }}</div>
              </div>
            </div>
            <div class="daily-bd">
              <div class="dailyimg-list" v-if="item1.uploadImages.length>0">
                <div class="dailyimg-title">文件：</div>
                <div class="dailyimg-item" v-for="item2 in item1.uploadImages" :key="item2">
                  <img :src="item2" preview="1" preview-text="日志" alt="">
                </div>
              </div>
              <!-- <img :src="item." alt=""> -->
            </div>
          </div>
        </div>
    </Modal>
  </div>
</template>
<script>
import {
  customerList,
  wokerList,
  areaList,
  updataBusiness,
  businessRef,
  areaMessage,
  sureBusinessRef,
  getAreaWoker,
  businessDailyTask
} from "../../api/business";
// import DailyMessage from '../../components/daily-message/index.vue'
export default {
  // components: {
	// 	DailyMessage
	// },
  data() {
    return {
      // 商机查询参数
      queryForm: {
        pageNumber: 1,
        // 客户名
        businessName: "",
        // 跟进人
        followName: "",
        // 创建人
        creatorName: "",
        // 时序状态
        currentStatus: null,
        // 状态
        handlingStatus: null,
        // 是否预期
        dataExpire: null,
        // 分配状态
        dataDispatch: null,
        startTime: null,
        endTime: null,
        // 商机id
        businessId: "",
        // 联系电话
        businessTelephone: "",
      },
      // 跟进人查询参数
      wokerForm: {
        pageNumber: 1,
        userNickName: "",
        belongCompany: 1,
        groupId: null,
      },
      // 总条数
      total1: 0,
      total2: 0,
      // 商机数组
      customerList: [],
      // 跟进人数组  (招商人员)
      wokerList: [],
      // 跟进人数组索引
      wokerIndex: null,
      // 片区数组
      areaList: [],
      // 跟进日志数组
      dailyList:[],
      // 当前时间
      currentTime: new Date().getTime(),
      // 时序状态标题
      currentStatusTitle: "选择时序状态",
      // 状态标题
      handlingStatusTitle: "选择状态",
      // 逾期标题
      dataExpireTitle: "是否逾期",
      // 分配标题
      dataDispatchTitle: "是否分配",
      // 审核标题
      verifyStatusTitle: "审核状态",
      // 片区标题
      areaTitle: "请选择",
      // 重新分配对话框
      modal1: false,
      //
      modal2: false,
      modal3: false,
      modal4:false,
      modal5:false,
      // 需要重新分配的商机Id
      sureNewSetId: "",
      // 需要转介的商机ID
      RemoveAreaId:"",
      // 将商机重新指定分配人的Id
      wokerId: "",
      // 原始商机所在的地区
      originalForm: {
        originalProvince: "",
        originalProvinceId: "",
        originalCity: "",
        originalCityId: "",
        originalDistrict: "",
        originalDistrictId: "",
        originalStreet: "",
        originalStreetId: "",
      },
      // 确认转介的参数
      referralsForm:{
        currentProvince: '',
        currentProvinceId: '',
        currentCity: '',
        currentCityId: '',
        currentDistrict: '',
        currentDistrictId: '',
        currentStreet: '',
        currentStreetId: ''
      },
      areamessageList: [],
      addressLocation: [],
      value:[]
    };
  },
  created() {
    this.loadData();
  },
  //  过滤器
  filters: {
    // 商机 时序状态过滤器
    currentStatusFilter: function (value) {
      if (value === 0) {
        return "待联系";
      } else if (value === 1) {
        return "意向阶段";
      } else if (value === 2) {
        return "商务洽谈";
      } else if (value === 3) {
        return "合约阶段";
      }
      return "/";
    },
    // 商机 状态
    handlingStatusFilter: function (value) {
      if (value === 1) {
        return "跟进中";
      } else if (value === 2) {
        return "成功";
      } else if (value === 3) {
        return "丢失";
      }
      return "/";
    },
    // 员工等级身份
    salesManLevelFilter: function (value) {
      if (value === 0) {
        return "兼职业务员";
      } else if (value === 1) {
        return "业务员";
      } else if (value === 2) {
        return "主管";
      } else if (value === 3) {
        return "经理";
      } else if (value === 4) {
        return "总监";
      }
      return "/";
    },
    belongCompanyFilter: function (value) {
      if (value) {
        return "是";
      } else {
        return "否";
      }
    },
  },
  methods: {
    loadData() {
      // 商机数组
      customerList(this.queryForm).then((res) => {
        console.log("商机数组", res);
        this.total1 = res.total;
        this.customerList = res.records;
      });
      // 跟进人数组
      wokerList(this.wokerForm).then((res) => {
        console.log("跟进人数组", res);
        this.wokerList = res.records;
        this.total2 = res.total;
      });
      // 片区分组数组
      areaList().then((res) => {
        console.log("片区分组数组", res);
        this.areaList = res;
      });
    },
    // 更换页码
    changeNumber1(num) {
      console.log(num);
      this.queryForm.pageNumber = num;
      this.loadData();
    },
    changeNumber2(num) {
      console.log(num);
      this.wokerForm.pageNumber = num;
      this.wokerIndex=null
      this.loadData();
    },
    // 查询条件之 时序状态
    changeMenu1(name) {
      console.log(name);
      this.queryForm.currentStatus = Number(name);
    },
    // 查询条件之 状态
    changeMenu2(name) {
      this.queryForm.handlingStatus = Number(name);
    },
    // 查询条件之 是否逾期
    changeMenu3(name) {
      this.queryForm.dataExpire = Number(name);
    },
    // 查询条件之 是否分配
    changeMenu4(name) {
      this.queryForm.dataDispatch = Number(name);
    },
    // 查询条件之 是否审核
    changeMenu5(name) {
      this.queryForm.verifyStatus = Number(name);
    },
    // 查询条件之 片区 （重新分配功能）
    changeMenu6(name) {
      for (let i in this.areaList) {
        if (this.areaList[i].id == name) {
          this.areaTitle = this.areaList[i].groupName;
          this.wokerForm.groupId = name;
        }
      }
    },
    // 选择时间
    changeTime(value) {
      console.log(value);
      this.queryForm.startTime = Date.parse(value[0]);
      this.queryForm.endTime = Date.parse(value[1]);
    },
    // 查询数组
    searchList() {
      this.loadData();
    },
    // 重新分配对话框
    openDistribution(index, id) {
      console.log(index, id);
      this.sureNewSetId = id;
      this.modal1 = true;
    },
    // 跟进日志对话框
    dailyTask(id){
      this.modal5=!this.modal5
      businessDailyTask(id).then(res=>{
        console.log(res)
        this.dailyList=res
        this.$previewRefresh();
        res.forEach(item=>{
          if (item.uploadImages != '[]') {
            item.uploadImages = item.uploadImages
              .replace('[', '')
              .replace(']', '')
              .trim()
              .split(',');
            console.log(item.uploadImages);
          } else {
            item.uploadImages = [];
          }
        })

      })
    },
    // 关闭重新分配对话框清除选中的查询条件
    cancelData() {
      // 数据初始化
      this.wokerForm.pageNumber = 1;
      (this.wokerForm.userNickName = ""), (this.wokerForm.groupId = null);
      this.wokerIndex = null;
      // iView的Select选择框清空
      this.$refs.resetSelect.clearSingleSelect();
      this.loadData();
    },
    // 查询员工
    searchWorker() {
      this.wokerIndex = null;
      this.loadData();
    },
    // 打开重置经纪人对话框
    openSet() {
      this.modal2 = true;
    },
    // 确认重置经纪人
    sureNewSet() {
      updataBusiness({
        // 商机ID
        handlingId: this.sureNewSetId,
        // 员工ID
        salesManId: this.wokerId,
      }).then((res) => {
        console.log(res);
        if (res == 1) {
          this.$Message.success("分配成功");
          // 分配成功关闭分配弹窗
          this.modal1 = false;
          // 数据初始化
          this.wokerForm.pageNumber = 1;
          (this.wokerForm.userNickName = ""), (this.wokerForm.groupId = null);
          this.wokerIndex = null;
          // iView的Select选择框清空
          this.$refs.resetSelect.clearSingleSelect();
          this.loadData();
        }
      });
    },
    // 取消重置经纪人
    cancelNewSet() {
      this.$Message.success("取消操作");
    },
    // 获取重置经纪人数组索引
    sureItem(index, id) {
      console.log(index, id);
      this.wokerIndex = index;
      this.wokerId = id;
    },

    // 转介对话框开关
    openRemoveArea(id) {
      console.log(id);
      this.modal3 = true;
      this.RemoveAreaId=id
      businessRef("/business/get/referrals/" + id).then((res) => {
        console.log(res);
        this.originalForm = res;
        console.log(this.originalForm);
      });
      areaMessage({ parentId: 0 }).then((res) => {
        console.log(res);
        var areamessageList = [];
        res.forEach((item) => {
          areamessageList.push({
            level: item.level,
            id: item.areaId,
            value: item.areaName,
            label: item.areaName,
            children: [],
            loading: false,
          });
        });
        this.areamessageList = areamessageList;
      });
    },
    // 关闭转介对话框 清除数据
    cancelArea(){
      this.addressLocation=[]
    },
    areaData(item, callback) {
      item.loading = true;
      console.log(item);
      setTimeout(() => {
        var areamessageList = [];
        if (item.level == 1) {
          areaMessage({ parentId: item.id }).then((res) => {
            console.log("二级区域", res);
            this.value[0] = item.value
            res.forEach((item) => {
              areamessageList.push({
                level: item.level,
                id: item.areaId,
                value: item.areaName,
                label: item.areaName,
                children: [],
                loading: false,
              });
            });
          });
        } else if (item.level == 2) {
          areaMessage({ parentId: item.id }).then((res) => {
            console.log("三级区域", res);
            res.forEach((item) => {
              areamessageList.push({
                level: item.level,
                id: item.areaId,
                value: item.areaName,
                label: item.areaName,
                children: [],
                loading: false,
              });
            });
          });
        } else if (item.level == 3) {
          areaMessage({ parentId: item.id }).then((res) => {
            console.log("四级区域", res);
            res.forEach((item) => {
              areamessageList.push({
                level: item.level,
                id: item.areaId,
                value: item.areaName,
                label: item.areaName
              });
            });
          });
        }
        item.children = areamessageList;
        item.loading = false;
        callback();
      }, 500);
    },
    // 确认选中的区域
    sureArea(value,selectedData) {
      console.log(selectedData);
      if(selectedData.length==4){
        this.referralsForm.currentProvince=selectedData[0].value
        this.referralsForm.currentCity=selectedData[1].value
        this.referralsForm.currentDistrict=selectedData[2].value
        this.referralsForm.currentStreet=selectedData[3].value
        
        this.referralsForm.currentProvinceId = selectedData[0].id;
        this.referralsForm.currentCityId = selectedData[1].id;
        this.referralsForm.currentDistrictId = selectedData[2].id;
        this.referralsForm.currentStreetId = selectedData[3].id;
      }
    },
    // 确认转介
    async sureRemoveArea(){
      const res1 = await getAreaWoker(this.referralsForm)
      console.log(res1)
      // 如果有员工在该地域，则直接转介
      if(res1>=1){
        this.removeAreaByApi()
      }else{
        this.modal4=true
      }
    },
    // 转介函数
    removeAreaByApi(){
      sureBusinessRef(this.RemoveAreaId,this.referralsForm).then(res=>{
        console.log(res)
        if(res==1){
          this.$Message.success("转介成功");
          this.addressLocation=[]
        }
      })
    },
    // 
    sureRemoveAreaByModel(){
      this.removeAreaByApi()
    }
  },
};
</script>
<style lang="less" scoped>
// 条件筛选区域
.search-item {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  font-size: 0.28rem;
  .item-text {
    width: 1.5rem;
    font-weight: 600;
  }
  .item-input {
    display: flex;
    flex-direction: column;
    button {
      margin: 0.15rem 0;
    }
  }
}
.business-item:last-child{
  margin-bottom:0;
}
.business-item {
  background-color: #ccc;
  margin-bottom: 0.15rem;
  padding: 0.2rem;
  font-size: 0.28rem;
  border-radius: 5px;
  .item:last-child {
    border-bottom: none;
  }
  .item {
    display: flex;
    margin: 0.15rem;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding: 0.15rem 0;
    .item-text {
      width: 2.2rem;
      font-weight: 600;
    }
  }
}
.item-message {
  flex: 1;
  button {
    margin:0.2rem;
  }
  .message {
    margin: 0.1rem 0;
  }
}
/deep/.ivu-card-body {
  padding: 0;
}
// 分页
.ivu-page {
  display: flex;
  justify-content: center;
  padding: 0.2rem;
}
.ivu-card-bordered {
  margin-bottom: 0.3rem;
}

// 跟进人数组
.trader-item {
  background-color: #ccc;
  padding: 0.2rem;
  font-size: 0.28rem;
  border-radius: 5px;
  margin-bottom: 0.2rem;
}
.trader-item.on {
  background-color: rgb(173, 240, 217);
}
.trader:last-child {
  border-bottom: none;
}
.trader {
  display: flex;
  align-items: center;
  padding: 0.15rem 0;
  border-bottom: 1px solid #ddd;
  .trader-text {
    width: 2.2rem;
    font-weight: 600;
  }
  .trader-message {
    flex: 1;
    .trader-box {
      margin: 0.1rem 0;
    }
  }
}

// 转介对话框
.areamessage-hd {
  .hd-title {
    font-weight: 600;
    font-size: 0.32rem;
    margin: 0.15rem 0;
  }
}
.areamessage-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .areamessage-item {
    width: 50%;
    margin: 0.1rem 0;
  }
}
.ivu-cascader{
  margin-top: 0.25rem;
}
// 跟进日志数组
.daily-list{
  .daily-title{
    display: flex;
    justify-content: start;
    align-items: center;
  }
}
.daily-item{
  margin-bottom: 0.5rem;
  padding: 0.35rem;
  background-color: #ccc;
  border-radius: 0.3rem;
}
.daily-title{
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #ddd;
  .daily-index{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: 3px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 0.28rem;
    margin-right: 0.25rem;
  }
  .title-text{
    font-weight: 600;
    font-size: 0.32rem;
    flex: 1;
  }
}
.hd-item{
  display: flex;
  margin: 0.25rem 0;
  font-size: 0.32rem;
}
.dailyimg-list{
  .dailyimg-title{
    font-size: 0.32rem;
  }
  .dailyimg-item{
    margin: 0.25rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 65%;
      height: auto;
    }
  }
}
.btn-list{
  display: flex;
  width: 4.5rem;
  flex-wrap: wrap;
}
</style>